<template>
  <div class="app-container">

    <div align="right">

      <el-button type="success" @click="addpro">添加商品</el-button>


    </div>

    <el-table
      :data="list"
      border
      fit
      highlight-current-row
    >

      <el-table-column align="center" label="序号" width="95">
      <template slot-scope="scope">
      {{ scope.$index+1 }}
      </template>
      </el-table-column>

      <el-table-column label="商品ID" width="95">
      <template slot-scope="scope">
      {{ scope.row.id }}
      </template>
      </el-table-column>

      <el-table-column label="商品名称" width="295">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>

      <el-table-column label="商品价格" width="100">
        <template slot-scope="scope">
          {{ scope.row.price }}
        </template>
      </el-table-column>

      <el-table-column label="实际价格" width="100">
        <template slot-scope="scope">
          {{ scope.row.salePrice }}
        </template>
      </el-table-column>

      <el-table-column label="商品卖点" width="120">
        <template slot-scope="scope">
          {{ scope.row.salePoint }}
        </template>
      </el-table-column>

      <el-table-column label="Actions" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="editpro(scope.row.id)">
            编辑
          </el-button>


          <el-button size="mini" type="danger" @click="delpro(scope.row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>


    </el-table>

    <pagination :background="bkcolor" v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

  </div>
</template>

<script>

import Pagination from '@/components/Pagination'

export default {


  components: { Pagination },
  data() {

    return {
      bkcolor:false,
      total:0,
      listQuery: {
        page: 1,
        limit: 10
      },
      list: null

    }
  },
  created() {
    // this.fetchData()
    this.getList()
  },
  methods: {
    getList(){

      var vm = this;
      this.axios({

        method: 'GET',
        url: 'http://localhost:8090/product/pageInfo?pageNum='+vm.listQuery.page+'&pageSize='+vm.listQuery.limit
      }).then(function(response){
        //得到一个PageInfo对象
         vm.total = response.data.total;// 将PageInfo中的total赋给vm的total
         vm.list = response.data.list;//当前页显示的所有数据
      });
    },
    addpro(){
     this.$router.push("/addproduct/index")


    },
    editpro(id){
      this.$router.push("/editproduct/index/"+id)
    },
    fetchData() {
      var vm = this;
      this.axios({
        method: 'GET',
        url: 'http://localhost:8090/product/list'
      }).then(function(resp){
        vm.list = resp.data
      });
    },
    delpro(id){
      var vm = this;
      this.axios({
        method: 'GET',
        url: 'http://localhost:8090/product/delpro?id='+id
      }).then(function(resp){
          if(resp.data=="success"){
            //弹框
            vm.$message({
              message: '删除成功',
              type: 'success'
            });
            vm.fetchData();//更新商品列表
          }
      }).catch(function(error){
        //弹框
        vm.$message.error('删除失败');
      });
    }

  }
}
</script>
